<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON工具</title>
    <link rel="stylesheet" href="../css/tab/pignose.tab.min.css"/>
    <link rel="stylesheet" href="../css/buttons/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/buttons/buttons.css"/>
    <style type="text/css">
        #wrapper {
            padding-bottom: 0px;
        }

        .article {
            max-width: 1200px;
            width: 80%;
            margin: 0 auto;
            padding-top: 40px;
            font-family: 'Raleway', 'helvetica', 'sans-serif';
            text-align: center;
        }

        .article table {
            font-size: 115%;
            text-align: left;
        }

        .article pre {
            font-size: 115%;
        }

        .tab {
            width: 100%;
            /*max-width: 600px;*/
            margin: 20px auto;
            border: 1px solid #e7e7e7;
            padding: 5px;
        }

        .nav.tab {
            width: auto;
            max-width: 100%;
            margin: 0;
            border: 0;
            padding: 0;
            border-bottom: 1px solid #ddd;
        }

        .pignose-sub-tab {
            border: 0;
            margin: 0;
            padding: 0;
        }

        .table {
            width: 100%;
            table-layout: fixed;
        }

        .table .subject {
            text-align: left;
            padding-left: 5%;
        }

        .table .date {
            text-align: right;
            padding-right: 5%;
        }

        .group {
            height: 500px;
            display: flex;
            justify-content: flex-start;
        }

        .editor-tip {
            position: absolute;
            right: 24px;
            top: 16px;
            font-size: 12px;
            color: #aaa;
        }

        .copy {
            position: absolute;
            right: 24px;
            bottom: 20px;
        }
        .mr10{
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div>
    <div id="wrapper">
        <div class="article">
            <h3>JSON工具</h3>
            <div class="tab pignose-tab-mint tab">
                <ul>
                    <li>
                        <a href="#">JSON美化</a>
                        <div>
                            <div class="group">
                                <div style="width: 50%;">
                                    <textarea id="json-src" placeholder="在此输入json字符串"
                                              style="width: 100%;height: 90%;padding: 10px;resize:none; outline:none;"></textarea>
                                </div>
                                <div>&nbsp;&nbsp;</div>
                                <div style="width: 50%;">
                                    <button type="button" class="copy btn btn-info btn-xs"
                                            data-clipboard-target="#json-target">复制
                                    </button>
                                    <p class="editor-tip">点击key和value值可以编辑</p>
                                    <div id="json-target"
                                         style="padding:10px;width: 100%;height: 90%;border: #767676 solid 1px;border-radius:3px;overflow: auto">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">JSON压缩转义</a>
                        <div>
                            <div style="height: 500px;">
                                <textarea id="json-str" placeholder="在此输入"
                                          style="width: 100%;height: 85%;resize:none; outline:none;"></textarea>
                                <div>
                                    <button id="btn-yszy" type="button" class="btn btn-primary btn-xs mr10">压缩并转义</button>
                                    <button id="btn-ys" id type="button" class="btn btn-primary btn-xs mr10">压缩</button>
                                    <button id="btn-zy" type="button" class="btn btn-primary btn-xs mr10">转义</button>
                                    <button id="btn-qczy" type="button" class="btn btn-light btn-xs mr10">去除转义</button>
                                    <button id="btn-qk" type="button" class="btn btn-warning btn-xs mr10">清空</button>
                                    <button id="btn-fz" type="button" class="copy2 btn btn-info btn-xs mr10" data-clipboard-target="#json-str">复制</button>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript" src="../js/script/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="../js/script/tab/pignose.tab.min.js"></script>
<script type="text/javascript" src="../js/script/jsonlint.js"></script>
<script type="text/javascript" src="../js/script/jquery.json.js"></script>
<script type="text/javascript" src="../js/script/bignumber.min.js"></script>
<script type="text/javascript" src="../js/script/clipboard.min.js"></script>

<script type="text/javascript" src="../js/jsonTools.js"></script>
</body>
</html>
